<template>
<!--弹出框-->
  <el-dialog :title=dialogTitle  v-model="dialogVisible" width="30%">
    <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="auto">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="nameValue"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phoneValue">
        <el-input v-model="phoneValue"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password" v-if=" dialogTitle =='新增'">
        <el-input v-model="passwordValue"></el-input>
      </el-form-item>
      <el-form-item label="日期" prop="address">
        <el-date-picker
          v-model="dataTimeValue"
          type="date"
          placeholder="请选择日期"
          :size="size"
          @change="changeDataTime"
      />
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="flex: auto">
        <el-button type="primary" @click="addRoleRow">保 存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import{ ref, onMounted,defineExpose,defineEmits} from 'vue'
import { formatDate } from "../../../utils/formatTime";
const emit = defineEmits(['update'])
const dialogVisible = ref(false)
const nameValue = ref()
const phoneValue = ref()
const dataTimeValue = ref()
const idValue = ref()
const passwordValue = ref()
const dialogTitle = ref()
const openDialog = (row:any,value:any) => {
  if(value === 1){
    dialogTitle.value = '编辑'
    dataTimeValue.value = row.dataTime
    nameValue.value = row.name
    phoneValue.value = row.phone
    idValue.value = row.id
    dialogVisible.value = true
  }else{
    dialogTitle.value = '新增'
    dialogVisible.value = true
    dataTimeValue.value= ''
    nameValue.value = ''
    phoneValue.value = ''
    passwordValue.value = ''
  }
}
const closeDialog = () => {
  dialogVisible.value = false
}
const changeDataTime = ()=>{
  dataTimeValue.value = formatDate(dataTimeValue.value,'YYYY-mm-dd')
}
const addRoleRow = () => {
    const param ={
      id:idValue.value,
      name:nameValue.value,
      phone:phoneValue.value,
      dataTime:dataTimeValue.value,
      dialogTitle:dialogTitle.value,
      password:passwordValue.value
    }
    console.log(param)
    emit('update',param)
}
defineExpose({
  openDialog,
  closeDialog
})
</script>



<style scoped lang="scss">

</style>
